<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/7/4
  Time: 20:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet" media="all">
</head>
<body>
<!-- 模糊查询框 -->
<form class="layui-form" action="" id="searchForm">
    <div class="layui-inline">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-inline">
            <input type="text" id="login_name" name="login_name"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">方法名</label>
        <div class="layui-input-inline">
            <input type="text" id="method_name" name="method_name"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="reserch">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="search_reset">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
</body>
<script>
    layui.use(['table','form','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 520
            ,url: '${pageContext.request.contextPath}/log/selectLog.do' //数据接口
            ,page: true //开启分页
            ,limit:10
            ,limits:[5,10,15,20,25,30,50]
            ,autoSort: false //禁用前端的自动排序，开启后端的服务器排序，根据客户需求
            ,toolbar: '#top'//开启顶部工具栏
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:90, sort: true, fixed: 'left'}
                ,{field: 'login_name', title: '登录名', width:120}
                ,{field: 'user_name', title: '用户名', width:120}
                ,{field: 'ip', title: 'IP地址', width: 120}
                ,{field: 'class_name', title: '类名', width: 120}
                ,{field: 'method_name', title: '方法名', width: 180}
                ,{field: 'params', title: '参数', width: 120}
                ,{field: 'create_time', title: '创建时间', width: 180}
            ]]
        });
        <!--模糊查询-->
        form.on('submit(formDemo)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field)
            table.reload('demo',{
                where: {
                    login_name: data.field.login_name
                    ,method_name:data.field.method_name
                }
                ,page: {
                    curr: 1
                }
            });
            return false;
        });
        //监听头部重置
        $("#search_reset").click(function () {
            table.reload('demo', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    login_name: "" //第一个查询条件
                    ,method_name:"" //第二个查询条件
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        //触发排序事件
        table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值 "
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });
    });
</script>
</html>
